<template>
    <div>
        <div class="con" v-for="(item,index) in arr" :key="index">
                <h2>
            <span class="font1">{{item.titlel}} </span>
            <span class="font2">{{item.titler}}  &gt;</span>
        </h2>
        <ul>
            <li>
                <img :src="item.img1" alt="">
                <span>{{item.title1}}</span>
            </li>
            <li>
                <img :src="item.img2" alt="">
                <span>{{item.title2}}</span>
            </li>
            <li>
                <img :src="item.img3" alt="">
                <span>{{item.title3}}</span>
            </li>
            <li>
                <img :src="item.img4" alt="">
                <span>{{item.title4}}</span>
            </li>
        </ul>
        </div>
    
    </div>
</template>

<script>
import {one} from "@/api/topapi.js"
export default {
    data(){
        return{
            arr:[]
        }
    },
    mounted(){
        one().then((ok)=>{
            this.arr=ok.data.list
        })
    }
}
</script>

<style lang="scss" scoped>
    h2{
        width: 100%;
        height: 0.41rem;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        font-weight: normal;
        background-color: #fff;
        .font1{
            font-size: 0.16rem;
           color: #666666;
           line-height: 0.41rem;
           padding-left: 0.1rem;
        }
        .font2{
            font-size: 0.14rem;
            color: #ababab;
            line-height: 0.41rem;
            padding-right: 0.1rem;
        }
    }
    ul{
        width: 100%;
        height: 0.82rem;
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        align-items: center;
        li{
            width: 0.5rem;
            height: 0.49rem;
            display: flex;
            flex-direction: column;
            img{
                width: 0.28rem;
                height: 0.28rem;
                margin: 0 auto;
            }
            span{
                  text-align: center;
                  font-size: 0.12rem;
                  color: #4d4d4d;
            }
        }
    }
    .con{
        margin-top: 0.1rem;
    }
</style>